<template>
  <div>
    <div class="content">
      <div class="header">
        <div>
          <span class="waimaispan">外卖</span>
        </div>
        <div class="right">
          <van-icon name="location-o" />
          <span>吃了吗</span>
          <van-icon name="arrow" />
        </div>

      </div>
      <div class="center">
        <div class="search">
          <input type="text" placeholder="请调整为手机端并刷新，酸菜鱼有链接">
          <span>搜索</span>


        </div>
        <div class="sort">
          <div class="sort-big">
            <div class="item" v-for="(item, index) in big_sort" :key="index">
              <svg class="icon" aria-hidden="true">
                <use :xlink:href='`#${item.icon}`'></use>
              </svg>
              {{ item.name }}
            </div>
          </div>
          <div class="sort-small">
            <div class="item" v-for="(item, index) in small_sort" :key="index">
              <svg class="icon" aria-hidden="true">
                <use :xlink:href='`#${item.icon}`'></use>
              </svg>
              {{ item.name }}
            </div>
          </div>
          <div class="tabs">
            <van-tabs v-model:active="active">
              <van-tab v-for="(item, index) in list" :key="index" :title="`${item.tab}`" >
                <List :list="item.data"></List>
              </van-tab>
            </van-tabs>
          </div>
        </div>
      </div>


    </div>
    <Footer></Footer>
  </div>
</template>


<script>
import Footer from '../../components/Footer.vue'
import { reactive, toRefs } from 'vue';
import List from '../../components/home/List.vue'
export default {
  components: {
    Footer, List
  },
  setup() {
    let data = reactive({
      list: [
        {
          tab: '天天神券',
          data: [
            {
              pic: 'https://bkimg.cdn.bcebos.com/pic/359b033b5bb5c9eaee08644adf39b6003bf3b3a4?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U4MA==,g_7,xp_5,yp_5',
              title: '酸菜鱼',
              sales: '1888',
              price: '起送费 ￥100 免配送费',
              label: ['门店上新', '很下饭']
            },
            {
              pic: 'https://bkimg.cdn.bcebos.com/pic/024f78f0f736afc37ebbedcab919ebc4b64512ed?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U5Mg==,g_7,xp_5,yp_5',
              title: '清蒸鱼',
              sales: '2888',
              price: '起送费 ￥200 免配送费',
              label: ['限时火爆', '很好吃']
            }
            ,{
              pic: 'https://bkimg.cdn.bcebos.com/pic/ca1349540923dd546abdc943da09b3de9d8248ca?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2UxMTY=,g_7,xp_5,yp_5',
              title: '红烧鱼',
              sales: '3888',
              price: '起送费 ￥300 免配送费',
              label: ['新客专享', '很nice']
            },
            {
              pic: 'https://bkimg.cdn.bcebos.com/pic/86d6277f9e2f07081affc879e624b899a801f2d5?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U4MA==,g_7,xp_5,yp_5',
              title: '剁椒鱼头',
              sales: '4888',
              price: '起送费 ￥400 免配送费',
              label: ['销量第一', '很很恨']
            }
          ]
        },
        {
          tab: '减配送费',
          data: [
            {
              pic: 'https://bkimg.cdn.bcebos.com/pic/359b033b5bb5c9eaee08644adf39b6003bf3b3a4?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U4MA==,g_7,xp_5,yp_5',
              title: '麻辣鱼',
              sales: '1888',
              price: '起送费 ￥100 免配送费',
              label: ['门店上新', '很下饭']
            },
            {
              pic: 'https://bkimg.cdn.bcebos.com/pic/024f78f0f736afc37ebbedcab919ebc4b64512ed?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U5Mg==,g_7,xp_5,yp_5',
              title: '红烧鱼',
              sales: '2888',
              price: '起送费 ￥200 免配送费',
              label: ['限时火爆', '很好吃']
            }
            ,{
              pic: 'https://bkimg.cdn.bcebos.com/pic/ca1349540923dd546abdc943da09b3de9d8248ca?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2UxMTY=,g_7,xp_5,yp_5',
              title: '不知道什么鱼',
              sales: '3888',
              price: '起送费 ￥300 免配送费',
              label: ['新客专享', '很nice']
            },
            {
              pic: 'https://bkimg.cdn.bcebos.com/pic/86d6277f9e2f07081affc879e624b899a801f2d5?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U4MA==,g_7,xp_5,yp_5',
              title: '怎么还有鱼',
              sales: '4888',
              price: '起送费 ￥400 免配送费',
              label: ['销量第一', '很很恨']
            }
          ]
        },
        {
          tab: '点评高分',
          data: [
            {
              pic: 'https://bkimg.cdn.bcebos.com/pic/359b033b5bb5c9eaee08644adf39b6003bf3b3a4?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U4MA==,g_7,xp_5,yp_5',
              title: '熊掌',
              sales: '1888',
              price: '起送费 ￥100 免配送费',
              label: ['门店上新', '很下饭']
            },
            {
              pic: 'https://bkimg.cdn.bcebos.com/pic/024f78f0f736afc37ebbedcab919ebc4b64512ed?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U5Mg==,g_7,xp_5,yp_5',
              title: '人参',
              sales: '2888',
              price: '起送费 ￥200 免配送费',
              label: ['限时火爆', '很好吃']
            }
            ,{
              pic: 'https://bkimg.cdn.bcebos.com/pic/ca1349540923dd546abdc943da09b3de9d8248ca?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2UxMTY=,g_7,xp_5,yp_5',
              title: '猪八戒',
              sales: '3888',
              price: '起送费 ￥300 免配送费',
              label: ['新客专享', '很nice']
            },
            {
              pic: 'https://bkimg.cdn.bcebos.com/pic/86d6277f9e2f07081affc879e624b899a801f2d5?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U4MA==,g_7,xp_5,yp_5',
              title: '孙悟空',
              sales: '4888',
              price: '起送费 ￥400 免配送费',
              label: ['销量第一', '很很恨']
            }
          ]
        },
        {
          tab: '会员满减',
          data: [
            {
              pic: 'https://bkimg.cdn.bcebos.com/pic/359b033b5bb5c9eaee08644adf39b6003bf3b3a4?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U4MA==,g_7,xp_5,yp_5',
              title: '吃不动了',
              sales: '1888',
              price: '起送费 ￥100 免配送费',
              label: ['门店上新', '很下饭']
            },
            {
              pic: 'https://bkimg.cdn.bcebos.com/pic/024f78f0f736afc37ebbedcab919ebc4b64512ed?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U5Mg==,g_7,xp_5,yp_5',
              title: '打包带走',
              sales: '2888',
              price: '起送费 ￥200 免配送费',
              label: ['限时火爆', '很好吃']
            }
            ,{
              pic: 'https://bkimg.cdn.bcebos.com/pic/ca1349540923dd546abdc943da09b3de9d8248ca?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2UxMTY=,g_7,xp_5,yp_5',
              title: '起个什么名字',
              sales: '3888',
              price: '起送费 ￥300 免配送费',
              label: ['新客专享', '很nice']
            },
            {
              pic: 'https://bkimg.cdn.bcebos.com/pic/86d6277f9e2f07081affc879e624b899a801f2d5?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U4MA==,g_7,xp_5,yp_5',
              title: '我真服了',
              sales: '4888',
              price: '起送费 ￥400 免配送费',
              label: ['销量第一', '很很恨']
            }
          ]
        }
      ],
      big_sort: [
        {
          name: '美食',
          icon: 'icon-meishi'
        },
        {
          name: '甜点饮品',
          icon: 'icon-tiandian'
        },
        {
          name: '超市便利',
          icon: 'icon-chaoshigouwu'
        },
        {
          name: '生鲜果蔬',
          icon: 'icon-boluo'
        },
        {
          name: '买药',
          icon: 'icon-yaopinmulu'
        },
      ],
      small_sort: [
        {
          name: '午餐',
          icon: 'icon-wucan'
        },
        {
          name: '买酒',
          icon: 'icon-wucan'
        },
        {
          name: '新鲜水果',
          icon: 'icon-wucan'
        },
        {
          name: '汉堡披萨',
          icon: 'icon-wucan'
        },
        {
          name: '休闲饮品',
          icon: 'icon-wucan'
        },
        {
          name: '夜宵',
          icon: 'icon-wucan'
        },
        {
          name: '吐司',
          icon: 'icon-wucan'
        },
        {
          name: '跑腿',
          icon: 'icon-wucan'
        },
        {
          name: '美人佳丽',
          icon: 'icon-wucan'
        },
        {
          name: '全部分类',
          icon: 'icon-wucan'
        },

      ]
    })
    return {
      ...toRefs(data)
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  background-image: linear-gradient(#ffc400, #fff);

  .header {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    align-items: center;

    .right {
      display: flex;
      font-size: 18px;
    }

    .waimaispan {
      font-size: 30px;
      font-weight: 900;
    }
  }

  .center {
    background-image: linear-gradient(#fff, red);
    padding: 10px 20px 0 20px;
    border-radius: 30px 30px 0 0;
  }

  .search {

    position: relative;
    display: flex;

    input {
      height: 30px;
      width: 100%;
      border: 1px solid #ffc400;
      border-radius: 16px;
      padding-left: 15px;
    }

    span {
      position: absolute;
      right: 0;
      top: 0;
      background-color: #ffc400;
      height: 33px;
      border-radius: 16px;
      align-items: center;
      display: flex;
      font-size: 15px;
      padding: 0 10px;
    }



  }

  .sort {
    .tabs{
      padding-bottom: 50px;
    }
    margin-top: 20px;

    .sort-big {
      display: flex;

      .item {
        flex: 1;
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;
        font-size: 14px;

        .icon {
          width: 40px;
          height: 40px;
          margin-bottom: 5px;
        }
      }
    }

    .sort-small {
      flex-wrap: wrap;
      flex: 1;
      display: flex;
      margin-top: 10px;
      
      .item {
        font-size: 13px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 12px;
        width: 20%;
        margin-bottom: 10px;

        .icon {
          width: 20px;
          height: 20px;
          margin-bottom: 5px;
        }
      }
    }
  }
  :deep .van-tab__text--ellipsis {
    font-size: 10px;
}
:deep .van-tabs__nav{
  background-color: transparent;
}
}
</style>